<template>
  <img class="head_icon" :style="style" :src="avatarUrl" />
</template>

<script>
import { getOssUrl } from '@src/util/assets'
const headImage1 = getOssUrl('/im/head_tourist.png')
const headImage2 = getOssUrl('/im/head_customer.png')
const headImage3 = getOssUrl('/im/xiaobao.png')
const headImage4 = getOssUrl('/im/head_service.png')
export default {
  name: 'Avatar',
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    isTourist: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: '' // customer| record｜sessionLine ｜ mailCustomer
    },
    customerInfo: {
      type: Object,
      default: () =>({})
    },
    size: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      headImage1,
      headImage2,
      headImage3
    };
  },
  computed:{

    avatarUrl(){
      let url = ''
      // 客户列表信息头像
      if(this.mode == 'customer') {
        const { registerType } = this.item
        if(registerType == 4 || this.isTourist){
          url = headImage1
        } else{
          url = headImage2
        }
      }

      // 排队会话列表头像
      if(this.mode == 'sessionLine') {
        const { conversationSponsorType } = this.item
        if(conversationSponsorType == 4){
          url = headImage1
        } else{
          url = headImage2
        }
      }

      // 聊天记录列表头像
      if(this.mode == 'record') {
        const { sendType, messageType, customerServiceHead } = this.item
        if( sendType == 2) {
          if(this.isTourist){
            url = headImage1
          }else {
            url = headImage2
          }
        } else if( sendType == 1 || sendType == 0 ) {
          if(messageType == 'robotMessage') {
            url = headImage3
          } else if(messageType == 'email'){
            url = headImage4
          } else {
            url = customerServiceHead || headImage4
          }
        }
      }
      // 邮件客服客户
      if(this.mode == 'mailCustomer' || this.mode == 'robot') {
        url = headImage3
      }

      if(this.mode == 'head_customer') {
        return headImage2
      }

      if(this.mode == 'head_service') {
        return headImage4
      }

      return url
    },
    style() {
      return `width:${this.size}px;height:${this.size}px`
    }
  },
  methods: {},
};
</script>

<style scoped lang='scss'>
.head_icon {
  border-radius: 50%;
}
</style>